<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery层叠文字切换焦点图动画DEMO演示</title>

<link rel="stylesheet" href="css/style.css">

</head>
<body>
<div class="m2usCon2">
<div class="container">
<div class="a-part por ovh about-fo">
  <div class="main poa t-f noselect">
    <div class="detail por">
      <div class="btn poa prev dn m2usBtnL"></div>
      <div class="btn poa next m2usBtnR"></div>
      <div class="in por">
        <div class="box poa" style="transform: translate(0px, -96px) scale(0.55, 0.55); opacity: 0.08;">
          <div class="box-in dn">
            <div class="time"></div>
            <p></p>
          </div>
        </div>
        <div class="box poa" style="transform: translate(0px, -64px) scale(0.7, 0.7); opacity: 0.2;">
          <div class="box-in dn">
            <div class="time"></div>
            <p></p>
          </div>
        </div>
        <div class="box poa" style="transform: translate(0px, -32px) scale(0.85, 0.85); opacity: 0.4;">
          <div class="box-in dn">
            <div class="time"></div>
            <p></p>
          </div>
        </div>
        <div class="box poa" style="display: block; opacity: 1; top: 0px;">
          <div class="box-in dn">
            <div class="time"></div>
            <p></p>
          </div>
        </div>
      </div>
    </div>
    <div class="list f-cb por ovh">
      <ul class="por">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
  </div>
</div>
</div>
</div>
<script src="js/jquery.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.transit.js"></script>
<script src="js/bocfe.js"></script>
<script language="javascript">
$(function(){    
	var Year = new Array(     
         [ 
                ["", "要使整个人生都过得舒适、愉快，这是不可能的，因为人类必须具备一种能应付逆境的态度。——卢梭"]
         ],
		 [ 
                ["", "重复别人所说的话，只需要教育；而要挑战别人所说的话，则需要头脑。——玛丽·佩蒂博恩·普尔"]
         ],
		 [ 
                ["", "人生就是学校。在那里，与其说好的教师是幸福，不如说好的教师是不幸。——海贝尔"]
         ],
		 [ 
                ["", "对一个人来说，所期望的不是别的，而仅仅是他能全力以赴和献身于一种美好事业。——爱因斯坦"]
         ],
		 [ 
                ["", "心如镜，虽外景不断变化，镜面却不会转动，这就是一颗平常心，能够景转而心不转。"]
         ],
		 [ 
                ["", "一份耕耘，一份收获，付出就有回报永不遭遇过失败，因我所碰到的都是暂时的挫折。"]
         ]
            
    )
	_PreLoadImg([
        "images/m2yy_btn.png" 
	],function(){
		// 初始化
		$(".a-part").each(function(){
			$(this).height(420)
			FullBg($(this), $(this).find("img.bg"))
		})
		
		// ABOUT PART FOURTH
		$(".about-fo .main").css("top", ($(window).height() - 572) / 2 )

		$(".about-fo .box").each(function(){
			$(this).find(".box-in").css("padding-top", 138 - $(this).find(".box-in").height() / 2 )
		})
		var $In    = $(".about-fo .detail .in"),
			InBl   = true,
			a      = 0,
			b      = 0,
			$FoUl  = $(".about-fo .list ul"),
			$FoLi  = $(".about-fo .list li")

		$FoUl.width($FoLi.width() * $FoLi.length)
		$FoLi.eq(0).addClass("cur")

		var cura  = $(".about-fo .list li.cur").index()

		$(".about-fo .box:last .box-in .time").html(Year[cura][0][0]).siblings().html(Year[cura][0][1])
		$(".about-fo .box:last .box-in").show().css("padding-top", 138 - $(".about-fo .box:last .box-in").height() / 2 )
		$(".about-fo .next").click(function(){
			$(".about-fo .prev").stop().fadeIn(500);
			if(!InBl){
				return
			}
			InBl = false;
			if(a == Year.length){
				InBl = true
				b = Year[a - 1].length
				return
			}
			b ++ ;
			if(b == Year[a].length){
				b = 0
				a ++
				if(a > 4 && a < Year.length){
					$FoUl.stop().animate({marginLeft: - 166 * (a - 4)}, 500)
				}
				$FoLi.eq(a).addClass("cur").siblings().removeClass("cur")
			}
			if(a == Year.length - 1 && b == Year[a].length - 1){
				$(this).stop().fadeOut(500);
			}
			if(a == Year.length){
				InBl = true
				return
			}
			var $list = '<div class="box poa dn"><div class="box-in dn"><div class="time"></div><p></p></div></div>'
			$In.find(".box").eq(0).before($list)
			$In.find(".box").eq(0).css({
				y : -96,
				scale : 0.55,
				opacity : 0.08
			})
			$In.find(".box").eq(4).stop().animate({
				top : 26,
				opacity : 0
			}, 500).prev().stop().transition({
				y : 0,
				scale : 1,
				opacity : 1
			}, 500).find(".box-in").stop().fadeIn(600).find(".time").html(Year[a][b][0]).siblings().html(Year[a][b][1])
			$In.find(".box").eq(3).find(".box-in").css("padding-top", 88 - $In.find(".box").eq(3).find(".box-in").height() / 2)
			$In.find(".box").eq(2).stop().transition({
				y : -32,
				scale : 0.85,
				opacity : 0.4
			}, 500).prev().stop().transition({
				y : -64,
				scale : 0.7,
				opacity : 0.2
			}, 500).prev().stop().fadeIn(500, function(){
				$In.find(".box").eq(4).remove()
				InBl = true
			})
		})
		$(".about-fo .prev").click(function(){
			$(".about-fo .next").stop().fadeIn(500);
			if(!InBl){
				return
			}
			InBl = false;
			if(a == 0 && b == 0){
				InBl = true;
				return
			}
			if(a == Year.length){
				a -- 
				b --
			}
			b --
			if(a == 0 && b == 0){
				$(this).stop().fadeOut(500);
			} 
			if(b == - 1 ){
				if(a > 0){
					a --
					if(a >= 4){
						$FoUl.stop().animate({marginLeft: - 166 * (a - 4)}, 500)
					}
					$FoLi.eq(a).addClass("cur").siblings().removeClass("cur")
				}
				b = Year[a].length - 1
			}		
			var $list = '<div class="box poa fif dn"><div class="box-in dn"><div class="time"></div><p></p></div></div>'
			$In.find(".box:last").after($list)
			$In.find(".box").eq(0).stop().fadeOut(500).next().stop().transition({
				y : - 96,
				scale : 0.55,
				opacity : 0.08
			}, 500).next().stop().transition({
				y : -64,
				scale : 0.7,

				opacity : 0.2
			}, 500).next().stop().transition({
				y : -32,
				scale : 0.85,
				opacity : 0.4
			}, 500).next().stop().fadeIn(600).find(".box-in").stop().fadeIn(600).find(".time").html(Year[a][b][0]).siblings().html(Year[a][b][1])
			$In.find(".box").eq(4).stop().animate({
				top : 0,
				opacity : 1
			}, 500, function(){
				$In.find(".box:first").remove()
				$In.find(".box").eq(3).siblings().find(".box-in").hide().find(".time").html("").siblings().html("")
				InBl = true
			}).find(".box-in").css("padding-top", 88 - $In.find(".box").eq(4).find(".box-in").height() / 2)
		})
		$FoLi.click(function(){
			if(!InBl){
				return
			}
			InBl = false;
			var n = $(".about-fo .list li.cur").index()
			$(this).addClass("cur").siblings().removeClass("cur")
			a = $(this).index(),
			b = 0
			if($(this).index() < 5){
				$FoUl.stop().animate({marginLeft: 0}, 500)
			}
			if($(this).index() != 0){
				$(".about-fo .prev").stop().fadeIn(500);
			}else{
				$(".about-fo .prev").stop().fadeOut(500);
			}
			if($(this).index() > n){
				var $list = '<div class="box poa dn"><div class="box-in dn"><div class="time"></div><p></p></div></div>'
				$In.find(".box").eq(0).before($list)
				$In.find(".box").eq(0).css({
					y : -96,
					scale : 0.55,
					opacity : 0.08
				})
				$In.find(".box").eq(4).stop().animate({
					top : 26,
					opacity : 1
				}, 500).prev().stop().transition({
					y : 0,
					scale : 1,
					opacity : 1
				}, 500).find(".box-in").stop().fadeIn(600).find(".time").html(Year[a][b][0]).siblings().html(Year[a][b][1])
				$In.find(".box").eq(3).find(".box-in").css("padding-top", 88 - $In.find(".box").eq(3).find(".box-in").height() / 2)
				$In.find(".box").eq(2).stop().transition({
					y : -32,
					scale : 0.85,
					opacity : 0.4
				}, 500).prev().stop().transition({
					y : -64,
					scale : 0.7,
					opacity : 0.2
				}, 500).prev().stop().fadeIn(500, function(){
					$In.find(".box").eq(4).remove()
					InBl = true
				})
			}else{
				var $list = '<div class="box poa fif dn"><div class="box-in dn"><div class="time"></div><p></p></div></div>'
				$In.find(".box:last").after($list)
				$In.find(".box").eq(0).stop().fadeOut(500).next().stop().transition({
					y : - 96,
					scale : 0.55,
					opacity : 0.08
				}, 500).next().stop().transition({
					y : -64,
					scale : 0.7,
					opacity : 0.2
				}, 500).next().stop().transition({
					y : -32,
					scale : 0.85,
					opacity : 0.4
				}, 500).next().stop().fadeIn(600).find(".box-in").stop().fadeIn(600).find(".time").html(Year[a][b][0]).siblings().html(Year[a][b][1])
				$In.find(".box").eq(4).stop().animate({
					top : 0,
					opacity : 1
				}, 500, function(){
					$In.find(".box:first").remove()
					$In.find(".box").eq(3).siblings().find(".box-in").hide().find(".time").html("").siblings().html("")
					InBl = true
				}).find(".box-in").css("padding-top", 138 - $In.find(".box").eq(4).find(".box-in").height() / 2)
			}
		})
		
        function aboutNews(n){
			if(!NewsBl){
				return
			}
			NewsBl = false
			$(".about-fif .btn span").eq(n).addClass("cur").siblings().removeClass("cur");
			var $UlMark = $(".about-fif ul.mark")
			$UlMark.stop().animate({
				left : - 1182,
				opacity : 0
			}, 500, function(){
				$UlMark.css("left", -17).find("li").css({
					left : 360,
					opacity : 0
				})
				$(".about-fif ul").eq(n).css({
					opacity : 1,
					"z-index" : 2
				}).addClass("mark").siblings().removeClass("mark").css({
					opacity : 0,
					"z-index" : 1
				})
				Enter($(".about-fif ul").eq(n).find("li").eq(0), "left", 0, 3, 500, 350)
				setTimeout(function(){
					NewsBl = true
				}, 1200)
			})
		}
		aboutNews(1);
		
	})	
})
</script>
</div>

<div style="text-align:center;clear:both;">
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</div>

</body>
</html>
